<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .haha {
            background-color: darkorchid;
            height: 100px;
            width: 700px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--此时info外侧的双引号不再是要把info封成字符串，而是把info作为一个变量来取值，
        双引号的作用就是提供了一个运算的环境，相当于插值表达式的大括号
        用v-bind主要是因为插值表达式在双引号里面失效-->
    <div v-bind:class="info">
        我是哈哈
    </div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
            el: "#app",
            data: {
                info: "haha"
            }
        })
    ;
</script>
</body>
</html>